<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
    <div class="pane">
        <p @click="startEdit">Start edit</p>
        <p @click="endEdit">End edit</p>
    </div>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"
import {ref} from "vue";

export default {
    name: "AddEditabled.component",
    components: {Maptalks},
    setup() {
        let point = ref(null), line = ref(null), polygon = ref(null), rectangle = ref(null), circle = ref(null),
            ellipse = ref(null), textbox = ref(null), label = ref(null)

        const startEdit = () => {
            point.startEdit();
            line.startEdit();
            polygon.startEdit();
            rectangle.startEdit();
            circle.startEdit();
            ellipse.startEdit();
            textbox.startEdit();
            label.startEditText();
        }

        const endEdit = () => {
            point.endEdit();
            line.endEdit();
            polygon.endEdit();
            rectangle.endEdit();
            circle.endEdit();
            ellipse.endEdit();
            textbox.endEdit();
            label.endEditText();
        }

        let mapOnLoadCB = (map) => {
            map.setZoom(14)
            let center = map.getCenter();

            let point = new maptalks.Marker(
                center.add(-0.001, 0.005),
                {
                    visible: true,
                    editable: true,
                    cursor: "pointer",
                    shadowBlur: 0,
                    shadowColor: "black",
                    draggable: false,
                    dragShadow: false, // display a shadow during dragging
                    drawOnAxis: null,  // force dragging stick on a axis, can be: x, y
                    symbol: {
                        "markerType": "ellipse",
                        "markerWidth": 40,
                        "markerHeight": 40,
                        "markerFill": "rgb(216,115,149)",
                        "markerLineColo": "#fff"
                    }
                }
            );

            let line = new maptalks.LineString([
                center.add(-0.001, 0.005),
                center.add(-0.003, 0.009),
            ], {
                arrowStyle: null, // arrow-style : now we only have classic
                arrowPlacement: "vertex-last", // arrow"s placement: vertex-first, vertex-last, vertex-firstlast, point
                visible: true,
                editable: true,
                cursor: null,
                shadowBlur: 0,
                shadowColor: "black",
                draggable: false,
                dragShadow: false, // display a shadow during dragging
                drawOnAxis: null,  // force dragging stick on a axis, can be: x, y
                symbol: {
                    "lineColor": "#1bbc9b",
                    "lineWidth": 3
                }
            });

            let polygon = new maptalks.Polygon([
                [
                    center.add(-0.011, 0.015),
                    center.add(-0.022, 0.016),
                    center.add(-0.033, 0.017),
                    center.add(-0.044, 0.018),
                    center.add(-0.055, 0.019),
                ]
            ], {
                visible: true,
                editable: true,
                cursor: "pointer",
                shadowBlur: 0,
                shadowColor: "black",
                draggable: false,
                dragShadow: false, // display a shadow during dragging
                drawOnAxis: null,  // force dragging stick on a axis, can be: x, y
                symbol: {
                    "lineColor": "#34495e",
                    "lineWidth": 2,
                    "polygonFill": "rgb(135,196,240)",
                    "polygonOpacity": 0.6
                }
            });

            let rectangle = new maptalks.Rectangle(center.add(-0.018, 0.012), 800, 700, {
                symbol: {
                    lineColor: "#34495e",
                    lineWidth: 2,
                    polygonFill: "#34495e",
                    polygonOpacity: 0.4
                }
            });

            let circle = new maptalks.Circle(center.add(0.002, 0.008), 500, {
                symbol: {
                    lineColor: "#34495e",
                    lineWidth: 2,
                    polygonFill: "#1bbc9b",
                    polygonOpacity: 0.4
                }
            });

            let ellipse = new maptalks.Ellipse(center.add(0.003, -0.005), 1000, 600, {
                symbol: {
                    lineColor: "#34495e",
                    lineWidth: 2,
                    polygonFill: "rgb(216,115,149)",
                    polygonOpacity: 0.4
                }
            });

            let textbox = new maptalks.TextBox(
                "This is a textbox, with very long content", // content
                center.add(0.004, -0.009),  // coordinate
                200,                 // width
                90,                  // height
                {
                    "draggable": true,
                    "textStyle": {
                        "wrap": true,          // auto wrap text
                        "padding": [12, 8],    // padding of textbox
                        "verticalAlignment": "top",
                        "horizontalAlignment": "right",
                        "symbol": {
                            "textFaceName": "monospace",
                            "textFill": "#34495e",
                            "textHaloFill": "#fff",
                            "textHaloRadius": 4,
                            "textSize": 18,
                            "textWeight": "bold"
                        }
                    },
                    "boxSymbol": {
                        // box"s symbol
                        "markerType": "square",
                        "markerFill": "rgb(135,196,240)",
                        "markerFillOpacity": 0.9,
                        "markerLineColor": "#34495e",
                        "markerLineWidth": 1
                    }
                }
            );

            let label = new maptalks.Label("label with box", center.add(-0.01, 0.015), {
                "textSymbol": {
                    "textFaceName": "sans-serif",
                    "textFill": "#fff",
                    "textSize": 18
                },
                "boxStyle": {
                    "padding": [12, 8],
                    "symbol": {
                        "markerType": "square",
                        "markerFillOpacity": 0.9,
                        "markerLineColor": "#34495e",
                        "markerFill": "#34495e",
                        "markerLineWidth": 1
                    }
                }
            })

            new maptalks.VectorLayer(MapLayerConst.MAP_EDITABLED_LAYER)
                .addGeometry([point, line, polygon, rectangle, circle, ellipse, textbox, label])
                .addTo(map);

        };

        return {
            mapOnLoadCB,
            startEdit, endEdit
        }
    }
}
</script>

<style scoped lang="less">
.pane {
    background: #34495e;
    line-height: 28px;
    color: #fff;
    z-index: 10;
    position: absolute;
    top: 20px;
    right: 20px;
    p {
        cursor: pointer;
        display: block;
        color: #fff;
        text-align: left;
        padding: 0 10px;
        min-width: 28px;
        min-height: 28px;
        float: left
    }
}
</style>
